<template>
  <div class="fx2-box">
    <h1>{{ subject }}</h1>
    <ul>
      <li v-for="(msg, i) in arr" :key="i">
        <p>{{ msg.title }}
        <img :src="msg.img" v-if="i<3"></p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "faxian2",
  props: ["subject"],
  data() {
    return {
      arr: [
        {
          title: "好物推荐榜",img:"https://res.vmallres.com/portal/1.11.4.301/h5/images/ic-hot-wap.png"
        },
        {
          title: "带你快速上手机新机",img:"https://res.vmallres.com/portal/1.11.4.301/h5/images/ic-hot-wap.png"
        },
        {
          title: "618智慧生活购精彩",img:"https://res.vmallres.com/portal/1.11.4.301/h5/images/ic-hot-wap.png"
        },
        {
          title: "更多话题 >",img:"https://res.vmallres.com/portal/1.11.4.301/h5/images/ic-hot-wap.png"
        },
      ],
    }
  },
};
</script>

<style scoped>
.fx2-box {
  width: 100%;
  height: 1.1rem;
}
.fx2-box h1 {
  font-size: 0.16rem;
  padding-left: 0.14rem;
  padding-top: 0.2rem;
}
.fx2-box ul {
  display: flex;
  flex-wrap: wrap;
}
.fx2-box ul li {
  width: 1.9rem;
  height: 0.35rem;
  line-height: 0.35rem;
  padding-left: 0.14rem;
}
.fx2-box ul li p {
  font-size: 0.14rem;
}
.fx2-box ul li img {
  display: inline-block;
  width: 0.12rem;
  height: 0.14rem;

}
li:nth-of-type(4){
  color: red;
}
</style>